介紹

來介紹ApolloData 基本的查詢，使用ApolloData Client 的話直接都用原生GraphQL的查詢語法即可不需要學其他的語法，前幾篇也有提到 graphql Hoc 查詢回來的資料會放到 props.data，但除了資料外 ApolloData 會多幾個 method ,接下來介紹 Query後會在props的 method

data：{ 
  user：{ name：“James” }，
  like：{ count：10 }，
  loading：false，
  error：null，
  variables：{ id：'asdf' }，
  refetch(){...}，
  fetchMore(){...}，
  startPolling(){...}，
  stopPolling(){...}，// ...更多方法 }

在上方可以看到 user like 這些都是發出fetch後得到的資料，但像其他的loading，error，variables...等等 就是ApolloData提供的 query method了，以下來介紹幾個常用的

1.loading
再發request的時候ApolloData會把loading這個狀態改成 true，所以通常都會拿這裡的props.data.loading來做載入動畫，另外當true的時候表示資料尚未得到

function MyComponent({ data: { loading } }) {
  if (loading) {
    return <div>Loading...</div>;
  } else {
    // ...
  }
}

export default graphql(gql`query { ... }`)(MyComponent);

2.error
這邊如果有錯誤返回通常也會把元件狀態改成錯誤時候會呈現的樣貌

function MyComponent({ data: { error } }) {
  if (error) {
    return <div>Error!</div>;
  } else {
    // ...
  }
}

export default graphql(gql`query { ... }`)(MyComponent);

3.variables

如果使用varibales 就可以改變發payload的查詢所以如果 variables 有改寫資料有改變物件也是會重新render

function MyComponent({ data: { variables } }) {
  return (
    <div>
      Query executed with the following variables:
      <code>{JSON.stringify(variables)}</code>
    </div>
  );
}

export default graphql(gql`query { ... }`)(MyComponent);

4.refetch
強制組件重新讀取您在graphql函數中定義的查詢。重新加載組件中的數據，或在發生錯誤後重試抓取時，此方法很有用。

function MyComponent({ data: { refetch } }) {
  return (
    <button onClick={() => refetch()}>
      Reload
    </button>
  );
}

export default graphql(gql`query { ... }`)(MyComponent);

總結

在ApolloData 真正好用的就是前端Query的這些API，可以在前端撰寫上更輕鬆愉快，下一篇再繼續介紹Query Method 其他好用的API